<template>
  <div>
    <el-container>
      <div class="bycheight">
        <p>
          <span>admin</span>
          <span style="margin: 0px 8px"
            >Logout
            <i class="el-icon-shopping-cart-1" style="font-size: 22px"></i
          ></span>
        </p>
      </div>
      <el-header
        ><p>
          <span >Home</span
          ><span style="margin: 0px 15px">/</span
          ><span style="color: red">Goods</span>
        </p></el-header
      >
      <el-main>
        <div class="bycmain">
          <p>
            Sort by:
            <span style="color: #eecfa7; margin: 0px 20px">Default</span>
            <span
              >Price
              <i
                class="el-icon-caret-top"
                @click="sort"
                v-show="!flag"
                style="font-size: 18px; color: red"
              ></i>
              <i
                class="el-icon-caret-bottom"
                @click="sort"
                v-show="flag"
                style="font-size: 18px; color: red"
              ></i
            ></span>
          </p>
        </div>
        <div class="byccommm">
          <div class="bycleft">
            <van-sidebar v-model="activeKey" @change="onChange">
              <div class="bycprice">price</div>
              <van-sidebar-item title="All" />
              <van-sidebar-item title="0.00-100.00" />
              <van-sidebar-item title="100.00-500.00" />
              <van-sidebar-item title="500.00-1000.00" />
              <van-sidebar-item title="1000.00-2000.00" />
            </van-sidebar>
          </div>
          <div class="bycright">
            <div
              class="bycmin-item"
              v-for="(item, index) in addaut"
              :key="index"
            >
              <img
                :src="'/img/' + item.productImage"
                alt=""
                style="width: 100%"
              />
              <p style="font-size: 23`px">{{ item.productName }}</p>
              <p style="color: red; margin: 34px 0px">￥{{ item.salePrice }}</p>
              <el-button
                type="danger"
                plain
                style="width: 100%"
                @click="addgoods(item)"
                >加入购物车</el-button
              >
            </div>

            <el-dialog
              color="red"
              title="加入购物车成功!!!"
              :visible.sync="centerDialogVisible"
              width="30%"
              center
            >
              <span slot="footer" class="dialog-footer">
                <el-button
                  @click="centerDialogVisible = false"
                  style="width: 200px"
                  >继续购物</el-button
                >
                <el-button
                  type="primary"
                  style="width: 200px"
                  @click="$router.push('/goodslist')"
                  >去购物车</el-button
                >
              </span>
            </el-dialog>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "demo",
  // 组件参数 接收来自父组件的数据
  props: [],
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {
      activeKey: 0,
      goodslist: [],
      flag: false,
      centerDialogVisible: false,
    };
  },
  // 计算属性
  computed: {
    addaut() {
      let arr = this.goodslist;
      if (this.activeKey == 0) {
        return arr;
      } else if (this.activeKey == 1) {
        return arr.filter((item) => {
          return item.salePrice >= 0 && item.salePrice <= 100;
        });
      } else if (this.activeKey == 2) {
        return arr.filter((item) => {
          return item.salePrice >= 100 && item.salePrice <= 500;
        });
      } else if (this.activeKey == 3) {
        return arr.filter((item) => {
          return item.salePrice >= 500 && item.salePrice <= 1000;
        });
      } else {
        return arr.filter((item) => {
          return item.salePrice >= 1000 && item.salePrice <= 2000;
        });
      }
    },
  },
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    addgoods(item) {
      if (this.$store.state.token == "") {
        this.$confirm("未登录请先登录, 是否去登录页", "token", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$router.push("/login");
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      }
      let obj = {
        num: 1,
        name: item.productName,
        pic: item.productImage,
        price: item.salePrice,
        checked: false,
        _id: item._id,
      };
      this.$store.commit("addgoods", obj);
      this.centerDialogVisible = true;
      this.$message.success("添加购物车成功");
    },
    sort() {
      this.flag = !this.flag;
      if (this.flag) {
        this.goodslist.sort((a, b) => {
          return b.salePrice - a.salePrice;
        });
      } else {
        this.goodslist.sort((a, b) => {
          return a.salePrice - b.salePrice;
        });
      }
    },
    onChange(o) {
      console.log(this.activeKey);
    },
  },
  //生命周期
  created() {},
  mounted() {
    this.$axios.get("/data.json").then((res) => {
      this.goodslist = res.result.list;
    });
    this.$axios.get("/data2.json").then((res) => {
      let list = res.result.list;
      list.forEach((item) => {
        this.goodslist.push(item);
      });
    });
    this.$axios.get("/data3.json").then((res) => {
      let list = res.result.list;
      list.forEach((item) => {
        this.goodslist.push(item);
      });
    });
  },
};
</script> 

<style scoped lang="scss">
.van-sidebar-item {
  font-size: 18px;
}
.bycprice {
  letter-spacing: 10px;
  margin: 30px 0px;
}
.van-sidebar-item--select::before {
  height: 32px;
}
.van-sidebar {
  width: 200px;
}
.byccommm {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
  .bycleft {
    width: 200px;
  }
  .bycright {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    .bycmin-item {
      width: 22%;
      margin: 1%;
      border: 1px solid #ddd;
      padding: 7px;
      box-sizing: border-box;
      background: #ffffff;
    }
    .bycmin-item:hover {
      cursor: pointer;
      transform: translate(0, -20px);
      box-shadow: 0px 0px 10px rgb(224, 185, 10);
      // transition-duration:1s ;
      transition: all 0.5s;
    }
  }
}

.bycheight {
  width: 100%;
  padding: 0px 70px;
  box-sizing: border-box;
  p {
    float: right;
    span {
      font-size: 16px;
      cursor: pointer;
    }
  }
}
.el-header {
  width: 100%;
  padding: 0px 25px;
  background: #f0f0f0;
  height: none;
  p {
    span {
      font-size: 15px;
      color: rgb(129, 127, 127);
      cursor: pointer;
    }
  }
}
.el-main {
  padding: 50px 65px;
  background: #f5f7fb;
  box-sizing: border-box;
}
.bycmain {
  height: 50px;
  background: #ffffff;
  padding: 0px 30px;
  margin-bottom: 30px;
  p {
    cursor: pointer;
    float: right;
  }
}
</style>
